const vue3Question = [
  {
    title: 'MVVM的理解',
    answer:
      'MVVM是一种前端设计构架模式,全称为Model-View-viewModel,Model代表数据模型,数据和业务逻辑都在model层中定义,View代表UI视图,负责数据的展示;ViewModel负责监听Model中数据的改变,并且控制视图的更新，处理用户交互操作,Model和View并无直接联系,而是通过ViewModel进行联系的，Model和ViewModel之间有着双向数据绑定的联系，因此Model中数据改变时，会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步',
  },
  {
    title: 'v-html和v-text的相同点,和区别',
    answer:
      'v-html和v-text都是内容渲染指令,都可以设置标签的内容，对标签的内容进行完全替换，区别，v-text会将内容原样输出，而v-html会对内容进行html解析，',
  },
  {
    title: 'v-bind的作用',
    answer: '给标签绑定数据&传入一个对象所有的prop',
  },
  {
    title: 'v-if和v-show的区别',
    answer:
      'v-if是根据条件创建和销毁标签，消耗较大，v-show是根据条件更改display的属性值，消耗较小，如果频繁的显示和隐藏，用v-show，否则 用v-if',
  },
  {
    title: 'v-for中key的作用，为什么不建议用index作为key',
    answer:
      '用来标识唯一的虚拟DOM节点，提高底层的diff算法效率，高效的更新页面,如果将下标作为key的话，对列表数据进行逆序添加，删除等破坏顺序的操作，会导致数据混乱',
  },
  {
    title: 'computed和watch的区别',
    answer:
      'computed是计算属性，基于data数据衍生出来的值，具有缓存效果和自动更新的特点，即多次调用只会执行一次，依赖的数据发生变化，计算属性会重新执行；watch是监听器，用来监听数据的变化，它没有缓存，处理相应的副作用（与处理数据无关的操作），常见的副作用有；异步请求，本地存储，日志处理',
  },
  {
    title: 'computed中可以进行异步操作吗，为什么',
    answer:
      '不可以，因为computed是同步将数据返回的，并渲染到页面中，无法将异步数据渲染到页面中',
  },
  {
    title: '为什么不建议v-if和v-for一起使用',
    answer:
      '在Vue2和Vue3中它们的优先级不同，在vue2中v-for的优先级大于v-if，vue3中相反，使用不当的话会造成性能浪费和报错',
  },
  {
    title: 'v-model的实现原理是什么',
    answer:
      'v-model的本质就是一个语法糖，在内部通过v-bind:value绑定数据，v-on:input监听数据的变化并修改value值，从而实现双向绑定',
  },
  {
    title: '什么是vue的生命周期，它的作用是什么',
    answer: 'Vue实例从创建到销毁的过程，称为生命周期，',
  },
  {
    title: '生命周期有哪些，并讲讲常用到的几个生命周期可适用于哪些场景',
    answer:
      '创建前后，挂载前后，更新前后，销毁前后，常用到的生命周期有：创建后，挂载后，销毁前。创建后一般用来初始化网络请求，或对某个事件处理函数进行防抖或节流包装，挂载后：做一些DOM操作，初始化ajax请求，绑定自定义事件，开启定时器，订阅消息等初始化操作，销毁前：解绑事件，清除定时器，取消订阅等操作',
  },
  {
    title: '第一次加载页面会触发哪几个钩子',
    answer: '创建前，创建后，挂载前，挂载后',
  },
  {
    title: 'Hash和History路由的区别',
    answer: '1.他们的原理不同，hash通过onhashchange()来监听URL的变化，查找对应的路由规则；History采用的pushState()和replaceState()方法来重写URL，2.History需要服务端的支持，hash不需要，hash的URL改变时不会向服务器发送请求，History刷新时会向服务器发送请求，需要在服务端做处理，如果服务端没有匹配当前的url，就会出现404页面3.在外观上，hash的的URL有个#符号，History没有，4.在兼容性方面，hash更好，',
  },
  {
    title: 'vue的核心特点',
    answer: '虚拟的DOM节点，数据驱动视图，组件式开发',
  },
  {
    title: 'vue2和vue3的区别',
    answer:
      '打包方式不同：vue2是用webpack进行打包的，vue3是用vite进行打包的，底层响应式原理不同：vue2底层是采用Object.definedProperty(),vue3是采用Proxy(代理)+reflect(反射)，开发模式不同：vue2是采用选项式声明，vue3是采用选项式或组合式声明。',
  },
  {
    title: 'vue3组合式api中为什么不再使用this',
    answer:
      '因为在组合式api中setup的执行时机在beforeCreate之前执行一次，此时this还不能访问data/methods/props等',
  },
  {
    title: '响应式api ref和reactive',
    answer:
      'ref一般用来声明基本类型的响应式数据，reactive只能用来声明引用数据类型的响应式数据，如果用ref声明引用数据类型的响应式数据，底层会调用reactive，ref要通过.value获取属性的值，如果ref声明的数据直接被覆盖不会丢失响应式，reactive声明的数据如果直接赋值会丢失响应式',
  },
  {
    title: 'watch和watchEffect的区别',
    answer:
      'watch可以监听指定的一个或多个对象，watchEffect可以监听任何数据的改变 watch可以返回新值和旧值，watchEffect只能返回新值，watchEffect默认会执行一次',
  },
  {
    title: 'toRef和toRefs的作用和区别',
    answer:
      '都是用来保持对原始数据的响应式跟踪，toRef对定义的响应式数据的某个属性进行引用，toRefs对定义的响应式数据整个对象进行引用',
  },
  {
    title: 'vue3中hooks的理解',
    answer:
      'hooks本身就是一个函数，把一些逻辑代码抽离出来，封装成一个公共函数，实现逻辑复用',
  },
  {
    title: 'vue3的内置组件',
    answer: 'teleport，transition，transition-group，keepalive，component',
  },
  {
    title: 'ts中接口interface和类型 type的区别',
    answer:
      'interface只能定义对象的类型，type主要用来给类型取别名，实现类型复用，同名的interface可以合并，同名的type不可以',
  },
  {
    title: 'keepalive的作用和生命周期',
    answer:
      '缓存组件 activated（组件展示时触发）和deactivated（组件隐藏时触发）',
  },
];
export default vue3Question;
